<template>
  <div class="nickname_page">
    <!-- 导航 开始 -->
    <nav-bar title="设置密码"></nav-bar>
    <!-- 导航 end -->

    <div class="form_box">
      <div class="form_cell">
        <img src="@/assets/images/my/phone.png" class="img" alt="" />
        <div class="input_box">
          <input type="text" class="a_input" :value="userInfo.phone" readonly placeholder="请输入你要绑定的手机号" />
        </div>
      </div>
      <div class="form_cell">
        <div class="input_box">
          <input type="text" v-model="form.code" class="a_input" placeholder="请输入验证码" />
        </div>
        <button class="btn" :disabled="time < 60" @click="sendCode" v-text="time < 60 ? time + 's后获取' : '发送验证码'"></button>
      </div>
      <div class="form_cell">
        <div class="input_box">
          <input type="password" v-model="form.password" class="a_input" placeholder="请输入新密码" />
        </div>
      </div>
      <div class="form_cell">
        <div class="input_box">
          <input type="password" v-model="form.surePassword" class="a_input" placeholder="请确认密码" />
        </div>
      </div>
    </div>

    <div class="btn_group">
      <button class="btn" @click="saveInfo">保存</button>
    </div>
  </div>
</template>
<script>
import {
  GET_MESSAGE_CODE,
  GET_PERSONAL_INFO,
  CHANGE_PERSONAL_PASSWORD,
  LOGOUT_BY_PASSWORD,
} from "@/http/interface";
import { showToast, checkPhone } from "@/utils/utils";
export default {
  data() {
    return {
      userInfo: {},
      form: {},
      time: 60,
      timeInterval: "",
      loading: false,
    };
  },
  async asyncData({ $axios }) {
    let res = await $axios.get(GET_PERSONAL_INFO);
    let userInfo = res.data || {};
    return { userInfo };
  },
  methods: {
    // 获取短信验证码
    async sendCode() {
      let _this = this;
      let m = this.userInfo
      let o = this.form;
      let time = this.time;
      if (!m.phone) {
        showToast({
          message: "请输入手机号",
        });
        return false;
      }

      if (!checkPhone(m.phone)) {
        showToast({
          message: "手机号格式不正确",
        });
        return false;
      }
      let timeInterval = setInterval(function () {
        if (time <= 0) {
          clearInterval(timeInterval);
          _this.time = 60;
          return false;
        }
        time--;
        _this.time = time;
      }, 1000);
      let res = await this.$axios.get(GET_MESSAGE_CODE, {
        params: { mobile: m.phone },
      });
      if (res.code == 200) {
        showToast({
          message: "发送成功",
          type: "success",
        });
      }
      console.log(res);
    },

    // 修改密码
    async saveInfo() {
      let _this = this;
      let o = this.form;
      if (!o.code) {
        showToast({
          message: "请输入验证码",
        });
        return false;
      }

      if (!o.password) {
        showToast({
          message: "请输入新密码",
        });
        return false;
      }
      if (!o.surePassword) {
        showToast({
          message: "请输入确认密码",
        });
        return false;
      }
      if (o.password !== o.surePassword) {
        showToast({
          message: "两次密码输入不一致",
        });
        return false;
      }

      let params = {};
      params.newPassword = o.password;
      params.code = o.code;
      let res = await this.$axios.post(CHANGE_PERSONAL_PASSWORD, params);
      if (res.code != 200) {
        showToast({
          message: res.message
        })
        return false;
      }
      showToast({
        message: "修改成功,请退出重新登录",
        type: "success",
      });
      this.logout();
    },

    // 退出登录
    async logout() {
      let res = await this.$axios.get(LOGOUT_BY_PASSWORD);
      if (res.code == 200) {
        this.$cookies.remove("token");
        this.$cookies.remove("user");
        this.$router.push({ path: "/my/login" });
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/my/password.less";
</style>